<template>
  <div>
    <ly-dialog v-model="dialogVisible" :title="loadingTitle" width="560px" :before-close="handleClose">
      <el-form :inline="false" :model="formData" :rules="rules" ref="rulesForm" label-position="right"
               label-width="auto">
        <el-form-item label="回测分析数据">
          <el-upload
              :show-file-list="false"
              :list-type="text"
              ref="uploadDefaultImage"
              :on-success="uploadSuccess"
              :before-upload="beforeUpload">
            <template v-if="upload_file">
              <div>
                <span>{{ upload_file.name }}</span>
              </div>
            </template>
            <el-icon v-else class="avatar-uploader-icon" size="medium">
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="分析名称：" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="公式：" prop="gongshi">
          <el-input v-model="formData.gongshi"></el-input>
        </el-form-item>
        <el-form-item label="计算周期：" prop="jisuanzhouqi">
          <el-input v-model="formData.jisuanzhouqi"></el-input>
        </el-form-item>
        <el-form-item label="复权：" prop="fuquan">
          <el-input v-model="formData.fuquan"></el-input>
        </el-form-item>
        <el-form-item label="评测时间段：">
          <el-date-picker
              style="width:350px"
              v-model="timers"
              type="datetimerange"
              @change="timeChange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="单品种初始分配资金：" prop="zuidasunshizhisun">
          <el-input v-model="formData.zuidasunshizhisun"></el-input>
        </el-form-item>
        <el-form-item label="最大损失止损：" prop="danpinzhongchushifenpeizijin">
          <el-input v-model="formData.danpinzhongchushifenpeizijin"></el-input>
        </el-form-item>
        <el-form-item label="最大收益止赢：" prop="zuidashouyizhiying">
          <el-input v-model="formData.zuidashouyizhiying"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleClose" :loading="loadingSave">取消</el-button>
        <el-button type="primary" @click="submitData" :loading="loadingSave">确定</el-button>
      </template>
    </ly-dialog>
  </div>
</template>

<script>
import {platformsettingsUploadPlatformImg, 上传回测分析数据} from "@/api/api";
import LyDialog from "../../../components/dialog/dialog";
import {dateFormats} from "@/utils/util";

export default {
  name: "addUser",
  components: {LyDialog},
  emits: ['refreshData'],
  data() {
    return {
      dialogVisible: false,
      loadingSave: false,
      loadingTitle: '',
      defaultImg: 'this.src="' + require('../../../assets/img/avatar.jpg') + '"',
      formData: {
        pingceshijianduankaishi: '',
        pingceshijianduanjieshu: '',
        name: '',
        gongshi: '',
        jisuanzhouqi: '',
        fuquan: '',
        danpinzhongchushifenpeizijin: '',
        zuidasunshizhisun: '',
        zuidashouyizhiying: '',
      },
      rules: {
        // username: [
        //   {required: true, message: '请输入用户名', trigger: 'blur'}
        // ],
        // nickname: [
        //     {required: true, message: '请输入昵称',trigger: 'blur'}
        // ],
        // password: [
        //   {required: true, message: '请输入密码', trigger: 'blur'}
        // ],
        // mobile: [
        //   {required: true, message: '请输入手机号', trigger: 'blur'}
        // ],
        // is_active: [
        //   {required: true, message: '请选择是否启用', trigger: 'blur'}
        // ]
      },
      rolelist: [],
      options: [],
      upload_file: undefined,
      timers: [],
    }
  },
  methods: {
    timeChange(val) {
      if (val) {
        this.formData.pingceshijianduankaishi = dateFormats(val[0], 'yyyy-MM-dd hh:mm:ss');
        this.formData.pingceshijianduanjieshu = dateFormats(val[1], 'yyyy-MM-dd hh:mm:ss');
      } else {
        this.formData.pingceshijianduankaishi = null
        this.formData.pingceshijianduanjieshu = null
      }
      this.search()
    },
    handleClose() {
      this.dialogVisible = false
      this.loadingSave = false
      this.$emit('refreshData')
    },
    addHuiCeFenXiFlagFn(item, flag) {
      this.loadingTitle = flag
      this.dialogVisible = true
      if (item) {
        delete this.rules.password
        this.formData = item
      } else {
        this.rules.password = [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
        this.formData = {
          // name: '',
          // username: '',
          // mobile: '',
          // is_active: true,
          // avatar: ''
        }
      }
    },
    submitData() {
      this.$refs['rulesForm'].validate(obj => {
        if (obj) {
          this.loadingSave = true
          const formDatas = new FormData();
          for (const key in this.formData) {
            if (typeof (this.formData[key]) === 'object') {
              formDatas.append(key, JSON.stringify(this.formData[key]));
            } else {
              formDatas.append(key, this.formData[key]);
            }
          }
          console.log('form', formDatas);
          debugger;
          formDatas.append('upload', this.upload_file);
          // param.role = param.role?param.role.split(" "):[]
          if (this.formData.id) {
            // UsersUsersEdit(param).then(res => {
            //   this.loadingSave = false
            //   if (res.code == 2000) {
            //     this.$message.success(res.msg)
            //     this.handleClose()
            //     this.$emit('refreshData')
            //   } else {
            //     this.$message.warning(res.msg)
            //   }
            // })
          } else {
            上传回测分析数据(formDatas).then(res => {
              this.loadingSave = false
              if (res.code == 2000) {
                this.$message.success(res.msg)
                this.handleClose()
                this.$emit('refreshData')
              } else {
                this.$message.warning(res.msg)
              }
            })
          }

        }
      })
    },
    imgBeforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJPG) {
        this.$message.error('图片只能是 JPG/PNG 格式!');
        return false
      }
      return isJPG;
    },
    beforeUpload(file) {
      console.log('beforeUpload', file);
      this.upload_file = file;
      return true;
    },
    async imgUploadRequest(param) {
      var vm = this
      let obj = await platformsettingsUploadPlatformImg(param)
      if (obj.code == 2000) {
        let res = ''
        if (obj.data.data[0].indexOf("://") >= 0) {
          res = obj.data.data[0]

        } else {
          res = url.split('/api')[0] + obj.data.data[0]
        }
        vm.formData.avatar = res
      } else {
        vm.$message.warning(res.msg)
      }
    },
    uploadSuccess() {
      this.$refs.uploadDefaultImage.clearFiles()
    }
  }
}
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}

.avatar {
  width: 128px;
  height: 128px;
  display: block;
}
</style>

